<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" >
    <el-form-item label="负责人"  >
      <el-select v-model="formInline.user" placeholder="请选择负责人" @click="getUserOption" style="width: 140px">
        <el-option v-for="item,index in UserOption" :label="item" :value="item" :key="index" />
      </el-select>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="formInline.activity" placeholder="请输入活动名称" clearable />
    </el-form-item>
    <el-form-item label="开始时间和结束时间">
      <el-date-picker
        v-model="timeValue"
        type="datetimerange"
        start-placeholder="Start date"
        end-placeholder="End date"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
      />
    </el-form-item>
    <el-form-item label="活动预算" prop="budget">
      <el-input v-model="formInline.budget" placeholder="请输入活动预算" clearable />
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
        v-model="formInline.creattime"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="showDialog">录入市场活动</el-button>
    <el-button type="danger" @click="patchDel">批量删除</el-button>
    <el-table :data="userlist" style="width: 100%" @selection-change="select">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="序号" width="120" />
    <el-table-column prop="ownerName" label="负责人" width="150" />
    <el-table-column prop="name" label="活动名称" width="150" />
    <el-table-column prop="startTime" label="开始时间" width="150" />
    <el-table-column prop="endTime" label="结束时间" width="150" />
    <el-table-column prop="cost" label="活动预算" width="200" />
    <el-table-column prop="createTime" label="创建时间" width="200" />
    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="scoped">
        <el-button link type="primary" size="small" @click="detail(scoped.row.id)">
          详细
        </el-button>
        <el-button link type="primary" size="small" @click="edit(scoped.row.id)">编辑</el-button>
        <el-button link type="primary" size="small" @click="del(scoped.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="change"/>
</template>
<script setup>
import { doGet, doPost } from '@/util/axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
let router=useRouter()
let formInline=ref({})
let rules={
  budget:[
  { pattern:/^\d+$/, message: '只能输入数字', trigger: 'blur' },
  ]
}
let timeValue=ref("")
let userlist=ref([])
let current=ref(1)
const pagesize=10
let total=ref(0)
let UserOption=ref([])
onMounted(()=>{
   getList(current.value)
   getUserOption()
})
function getUserOption(){
  if(UserOption.value.length === 0){
      doGet("/getUserOption").then(res=>{
      UserOption.value=res.data.data
    })
  }
}
function change(num){
    getList(num,formInline.value)
}

function getList(num,activityInfo={}){
  let query={
    'current':num,
    'pagesize':pagesize,
  }
    query={...query,...activityInfo}
    if(timeValue.value!=""){
      query['starttime']=timeValue.value[0]
      query['endtime']=timeValue.value[1]
    }
  doGet("/getActivity",query).then(res=>{
        userlist.value=res.data.data.list
        console.log(userlist.value)
        current.value=res.data.data.pageNum
        total.value=res.data.data.total
  })
}
function onSubmit(){
  console.log(formInline.value)
  getList(1,formInline.value)
}
function onReset(){
  UserOption.value=[]
  formInline.value={}
  timeValue.value=""
}
function showDialog(){
  router.push({name:"ActivityAdd"})
}
function patchDel(){}
function select(value){

}
function edit(num){
  router.push({name:"Activityedit",params:{"id":num}})
}
function detail(num){
  router.push({name:"Activitydetail",params:{"id":num}})
}
</script>
<style scoped></style>